<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->


<template>
  <div class="content">
    <scroll :beforeScroll="beforeScrollData" ref="bscroll" class="home_box">
      <div class="home_center_box">
        <div class="home_center_box_child home_center_sue">
          <h3>常用应用</h3>
          <div>
            <div
              class="home_center_sue_info"
              v-for="item in oftenDataInfo"
              :key="item.id"
              @click="appItem(item.routeUrl)"
            >
              <img v-lazy="oftenDataInfoImg(item.appImgId)" alt />
              <em>{{ item.appletName }}</em>
            </div>
            <!-- loading 组件 -->
            <div v-show="!oftenDataInfo.length" class="loading-container">
              <joys-loading></joys-loading>
            </div>
          </div>
        </div>

        <div class="home_center_box_child home_center_projcect">
          <div class="home_center_projcect_title">
            <h3>项目概况</h3>
            <img src="@/assets/img/refresh@3x.png" @click="projcectLoad" alt />
          </div>
          <div class="home_center_projcect_center_box">
            <div class="home_center_projcect_center">
              <div class="projcect_center_back">
                <p>项目审批中</p>
                <span>{{ homePorjcectInfo.PROJECT_CHANGE }}</span>
              </div>
            </div>
            <div class="home_center_projcect_center">
              <div class="projcect_center_back">
                <p>项目变更中</p>
                <span>{{ homePorjcectInfo.PROJECT_INFO }}</span>
              </div>
            </div>
            <div class="home_center_projcect_center">
              <div class="projcect_center_back">
                <p>项目立项中</p>
                <span>{{ homePorjcectInfo.busiTypeId }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="home_center_box_child home_center_task">
          <div class="home_center_task_title">
            <h3>任务中心</h3>
            <img src="@/assets/img/More2@3x.png" @click="taskGo" alt />
            <img src="@/assets/img/refresh@3x.png" @click="taskData" alt />
          </div>
          <div
            class="home_center_task_center"
            v-for="item in taskDataInfo"
            :key="item.id"
            @click="taskItem(item)"
          >
            <img v-lazy="oftenDataInfoImg(item.busiTypeId)" alt />
            <div class="task_center">
              <span>{{ item.busiTypeName }}</span>
              <em>{{ item.acceptTime | dateFormat("yyyy/MM/dd hh:mm:ss") }}</em>
              <p>{{ item.messageContent }}</p>
            </div>
          </div>
          <!-- loading 组件 -->
          <div v-show="!taskDataInfo.length" class="loading-container">
            <joys-loading></joys-loading>
          </div>
        </div>
      </div>

      <!-- </scroll> -->
    </scroll>
  </div>
</template>

<script>
// import { myDOM } from "@/assets/js/utils.js";
import BScroll from "better-scroll";
import Scroll from "@/components/JoysScroll/JoysScroll";
import JoysHeader from "@/components/JoysHeader/JoysHeader";
import JoysLoading from "@/components/JoysLoading/JoysLoading";
export default {
  name: "home",
  components: {
    Scroll,
    JoysLoading
  },
  data () {
    return {
      pulldown: true,
      beforeScrollData: false,
      oftenDataInfo: [],
      taskDataInfo: [],
      homePorjcectInfo: {
        busiTypeId: "11",
        PROJECT_INFO: "0",
        PROJECT_CHANGE: "0"
      }
    };
  },
  props: {},
  watch: {},
  filters: {},
  methods: {
    // 模块路由跳转

    appItem (val) {
      this.$router.push({
        path: `${val}`
      });
    },
    // 项目概况接口
    homePorjcect () {
      this.$axios({
        method: "get",
        url: "/joys-rest/lss-project/project/overview",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          billStatus: "AUDITING"
        }
      })
        .then(res => {
          var _homePorjcectInfo = { busiTypeId: "11" };
          res.data.map(function (e, item) {
            _homePorjcectInfo[e.sourceBillType] = e.countPro;
          });
          this.homePorjcectInfo = _homePorjcectInfo;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 任务中心请求
    taskData () {
      (this.taskDataInfo = ""),
        this.$axios({
          method: "get",
          url: "/joys-rest/joys-bpm/taskMessage/byCondition",
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
          },
          params: {
            workStatus: "NOT_WORKING",
            pageIndex: 1,
            pageSize: 5
          }
        })
          .then(res => {
            this.taskDataInfo = res.data.rows;
            console.log(this.taskDataInfo, "shuju");
          })
          .catch(error => {
            console.log(error);
          });
    },
    // 常用应用接口
    oftenData () {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-master-data/applets",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          tag: "COMMON",
          typeTags: ["MAPP"]
        }
      })
        .then(res => {
          console.log(res, "klsdfjgsdgksdhkgjhsdfg");
          this.oftenDataInfo = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    oftenDataInfoImg (id) {
      if (!id) {
        return require("@/assets/img/defaultImg.png");
      } else {
        return (
          this.$baseUrl +
          "/joys-rest/joys-file/file/browse/one2one/" +
          id +
          "?AUTH-TOKEN=" +
          localStorage.getItem("AUTH-TOKEN")
        );
      }
    },
    taskGo () {
      console.log("tag");
      this.$router.push({
        path: "/home/task"
      });
    },
    projcectLoad () {
      this.homePorjcect();
    },
    taskItem (item) {
            this.$router.push({
        path: `/home/${item.busiId}`,
        query:{
          taskItemData:item
        }
      });
    }
  },
  computed: {},
  created () {
  },
  mounted () {

    this.oftenData();
    this.taskData();
    this.homePorjcect();
  },
  destroyed () { }
};
</script>
<style scoped lang="less">
.content {
  width: 100%;

  .home_box {
    position: fixed;
    top: 0.44rem;
    bottom: 0.58rem;
    width: 100%;
    // z-index: 200;
    overflow: hidden;
    background-color: #fbf9fe;
    // 内容盒子
    .home_center_box::before {
      content: "";
      display: block;
      height: 0.1rem;
      width: 100%;
    }
    .home_center_box::after {
      content: "";
      display: block;
      height: 0.1rem;
      width: 100%;
    }
    .home_center_box {
      margin: 0 0.16rem;
      position: relative;
      // 常用应用
      .home_center_sue {
        overflow: hidden;
        background: #ffffff;
        box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
        height: 100%;
        .home_center_sue_info {
          float: left;
          width: 25%;
          text-align: center;
          height: 0.67rem;
          img {
            width: 0.25rem;
            height: 0.25rem;
            display: block;
            margin: auto;
          }
          em {
            font-family: Regular;
            font-size: 0.13rem;
            color: #191919;
            letter-spacing: -0.4px;
            line-height: 0.13rem;
            margin-top: 0.1rem;
            display: block;
          }
        }
      }
      // 项目概况
      .home_center_projcect {
        overflow: hidden;
        clear: both;
        margin-top: 0.1rem;
        .home_center_projcect_title {
          margin-right: 0.1rem;
          overflow: hidden;
          h3 {
            float: left;
          }
          img {
            height: 0.14rem;
            margin: 0.12rem 0rem;
            width: 0.15rem;
            padding: 0.1rem;
            float: right;
            line-height: 0.58rem;
          }
        }
        .home_center_projcect_center_box {
          margin: 0 0.06rem;
          overflow: hidden;
          .home_center_projcect_center {
            float: left;
            width: 33.33333%;
            // height: 1.2rem;
            margin-bottom: 0.11rem;
            .projcect_center_back {
              padding-top: 0.2rem;
              padding-left: 0.1rem;
              height: 100%;
              margin: 0.05rem;
              border-radius: 0.04rem;
              p {
                display: block;

                margin-bottom: 0.04rem;
                font-family: Regular;
                font-size: 0.12rem;
                color: #ffffff;
                letter-spacing: -0.33px;
                line-height: 0.12rem;
              }
              span {
                font-family: HelveticaNeue;
                font-size: 0.32rem;
                color: #ffffff;
                letter-spacing: 0.1px;
                line-height: 0.32rem;
              }
            }
          }
          .home_center_projcect_center:nth-child(1) .projcect_center_back {
            background-image: url(../../../../assets/img/background@3x.png);
            background-size: 100% 100%;
          }
          .home_center_projcect_center:nth-child(2) .projcect_center_back {
            background-image: url(../../../../assets/img/Background2@3x.png);
            background-size: 100% 100%;
          }
          .home_center_projcect_center:nth-child(3) .projcect_center_back {
            background-image: url(../../../../assets/img/background3@3x.png);
            background-size: 100% 100%;
          }
        }
      }
      // 任务中心
      .home_center_task {
        clear: both;
        margin-top: 0.1rem;
        .home_center_task_title {
          // margin-right: 0.7rem;
          overflow: hidden;
          h3 {
            float: left;
          }
          img {
            height: 0.14rem;
            margin: 0.12rem 0rem;
            // margin-left: 0.1rem;
            width: 0.15rem;
            padding: 0.1rem;
            float: right;
            line-height: 0.58rem;
          }
          img:hover {
          }
        }
        .home_center_task_center {
          overflow: hidden;
          padding-left: 0.5rem;
          img {
            float: left;
            width: 0.2rem;
            height: 0.2rem;
            margin: 0.2rem 0.15rem;
            margin-left: -0.35rem;
            border-radius: 50%;
          }
          .task_center {
            width: 100%;
            // width: 2.87rem;
            height: 0.6rem;
            box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
            // background-color: red;
            float: left;
            span {
              float: left;
              font-family: Mediums;
              font-size: 0.15rem;
              color: #202f1f;
              letter-spacing: -0.41px;
              line-height: 0.15rem;
              margin-top: 0.12rem;
            }
            em {
              float: right;
              font-family: Regular;
              font-size: 0.13rem;
              color: #adadad;
              letter-spacing: -0.36px;
              text-align: right;
              line-height: 0.13rem;
              margin-top: 0.12rem;
              margin-right: 0.18rem;
            }
            p {
              clear: both;
              font-family: Regular;
              font-size: 0.13rem;
              color: #636363;
              letter-spacing: -0.36px;
              line-height: 0.13rem;
              margin-top: 0.35rem;
            }
          }
        }
      }
    }
    .home_center_box .home_center_box_child {
      width: 100%;
      background: #ffffff;
      padding-bottom: auto;
      box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    }
    .home_center_box div h3 {
      font-family: Mediums;
      font-size: 0.18rem;
      color: #2e2e2e;
      letter-spacing: -0.43px;
      line-height: 0.18rem;
      font-weight: 700;
      padding: 0.2rem 0;
      margin-left: 0.16rem;
      margin-bottom: 0.2rem;
    }
  }
}
</style>
